<template>
  <section class="todoapp">
    <HeaderT @addTodo="addTodo" />
    <ListT :todoList="todoList" />
    <FooteT :todoList="todoList" @clearTodo="clearTodo" />
  </section>
</template>

<script>
import HeaderT from "./components/HeaderT.vue";
import FooteT from "./components/FooterT.vue";
import ListT from "./components/ListT.vue";
export default {
  name: "App",
  components: {
    HeaderT,
    ListT,
    FooteT,
  },
  props: {},
  data() {
    return {
      todoList: [
        { id: "001", todo: "吃饭", done: true },
        { id: "002", todo: "睡觉", done: true },
        { id: "003", todo: "打豆豆", done: false },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    addTodo(obj) {
      this.todoList = [obj, ...this.todoList];
    },
    delTodo(id) {
      this.todoList = this.todoList.filter((it) => id !== it.id);
    },
    clearTodo() {
      this.todoList = this.todoList.filter((it) => !it.done);
    },
    changeTodo(id) {
      this.todoList.forEach((it) => {
        if (it.id === id) it.done = !it.done;
      });
    },
  },
  mounted() {
    this.$bus.$on("delTodo", this.delTodo);
    this.$bus.$on("changeTodo", this.changeTodo);
  },
  beforeDestroy() {
    this.$bus.$off("delTodo");
    this.$bus.$off("changeTodo");
  },
};
</script>
